<template>
    <div class="box">
        <div class="cardbox" :style="active != 0 ? { border: '1px solid #EEEEEE', borderRadius: '4px' } : ''">
            <div class="bgc" v-if="active != 0" :style="{
                backgroundImage: `linear-gradient(to bottom, ${color} ,#fff`,
            }">
            </div>
            <div class="step-line" v-if="keyIndex != 0" :style="{
                border: `1px ${state == 2 ? 'dashed' : 'solid'} ${color}`
            }"></div>
            <div class="content">
                <div class="icon">
                    <img :src="iconPath" alt="">
                </div>
                <div class="bottom">
                    <h2 v-if="state != 3" :style="active != 0 ? { color: `${color}`, fontWeight: 'bold' } : ''">{{ title }}</h2>
                    <h2 v-else :style="active != 0 ? { color: `${fontColor}`, fontWeight: 'bold' } : ''">{{ title }}</h2>
                    <div class="percent" :style="{
                        color: `${fontColor}`
                    }">
                        {{ percent }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: () => {
                return "项目立项"
            }
        },
        keyIndex: {
            type: Number,
            default: () => {
                return 0
            }
        },
        percent: {
            type: String,
            default: () => {
                return "100%"
            }
        },
        active: {
            type: Number,
            default: () => {
                return 0
            }
        },
        state: {
            type: Number,
            default: () => {
                return 1
            }
        }
    },
    mounted() {
        this.switchColor()
    },
    data() {
        return {
            color: "",
            iconPath: "",
            fontColor: ""
        }
    },
    methods: {
        switchColor() {
            switch (this.state) {
                case 1:
                    this.fontColor = "#6393E8"
                    this.color = "#6393E8"
                    this.iconPath = require('./img/done.png')
                    break;
                case 2:
                    this.fontColor = "#F67935"
                    this.color = "#F67935"
                    this.iconPath = require('./img/doing.png')
                    break;
                case 3:
                    this.color = "#E4E9F1"
                    this.fontColor = "#999999"
                    this.iconPath = require('./img/undo.png')
                    break;
                default:
                    this.color = "#6393E8"
                    this.fontColor = "#6393E8"
                    this.iconPath = require('./img/done.png')
                    break;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    .cardbox {
        // box-shadow: 0 4px 39px 0 rgba(0, 0, 0, 0.0784313725);
        // border: 1px solid #ddd;
        // opacity: 0.2;
        position: relative;

        .step-line {
            position: absolute;
            z-index: 1001;
            height: 1px;
            width: 78px;
            top: 27px;
            left: -45px;
            opacity: 1;
        }

        .bgc {
            z-index: 999;
            position: absolute;
            border-radius: 4px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.2;
        }

        .content {
            position: relative;
            z-index: 1000;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            padding: 16px 0;
            box-sizing: border-box;

            .icon {
                width: 24px;
                height: 24px;
                border-radius: 16px 16px 16px 16px;
                opacity: 1;
                margin-bottom: 8px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }


            .bottom {
                // width: 56px;
                // height: 48px;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;

                h2 {
                    margin: 0 !important;
                    padding: 0 !important;
                    width: 84.89px;
                    text-align: center;
                    height: 20px;
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    white-space: nowrap;
                    /* 强制文本不换行 */
                    overflow: hidden;
                    /* 隐藏超出的部分 */
                    text-overflow: ellipsis;
                    /* 使用省略号表示截断的部分 */
                    line-height: 20px;
                    -webkit-background-clip: text;
                }

                .percent {
                    width: 45px;
                    height: 24px;
                    font-size: 16px;
                    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                    font-weight: bold;
                    color: #6393E8;
                    line-height: 24px;
                    text-align: center;
                    -webkit-background-clip: text;
                }
            }
        }
    }
}</style>